<template>
  <a-row>
    <a-row class="mytitle">
      <a-icon :component="node" style="margin:0 .5rem 0 0" />
      {{ $t("Node-info") }}
    </a-row>
    <a-card v-show="spinning" style="margin:1em" :title="$t('Node-list')" hoverable>
      <a-button slot="extra" @click="changeExit" type="primary" size="small" icon="fullscreen-exit" />
      <a-table :columns="nodecolumns" :data-source="nodedata" size="small" rowKey="id" :locale="defaultSetting">
        <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
        <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
            <a-input v-ant-ref="c => searchInput = c" :placeholder="$t('Enter')+$t('Search-content')" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;" />
            <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">{{$t('Search')}}</a-button>
            <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">{{$t('Reset')}}</a-button>
        </div>
        <a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
        <template slot="customRender" slot-scope="text">
            <span v-if='searchText'>
                <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                    <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
                    <template v-else>{{fragment}}</template>
                </template>
            </span>
            <template v-else>{{text}}</template>
        </template>
        <span slot="cluster_status" slot-scope='cluster_status'>
          <a-tag :color="cluster_status ? 'green' : 'red'">{{cluster_status ? $t('Connected') : $t('Not-connected')}}</a-tag>
        </span>
        <span slot="cpu" slot-scope="cpu" style="display: block; width: 60%">
            <!-- <a-tooltip :title="cpu"> -->
                <a-progress :percent="Number(cpu.replace(/%/g, ''))" status='active' ></a-progress>
            <!-- </a-tooltip> -->
        </span>
        <span slot="mem" slot-scope="mem" style="display: block; width: 60%">
            <!-- <a-tooltip :title="mem"> -->
                <a-progress :percent="Number(mem.replace(/%/g, ''))" status='active' ></a-progress>
            <!-- </a-tooltip> -->
        </span>
        <span slot="disk" slot-scope="disk" style="display: block; width: 60%">
            <!-- <a-tooltip :title="disk"> -->
                <a-progress :percent="Number(disk.replace(/%/g, ''))" status='active' ></a-progress>
            <!-- </a-tooltip> -->
        </span>
        <template slot="Operate" slot-scope="text, record, index">
          <a @click="checkAll(index)">{{$t('Detail')}}</a>
        </template>
      </a-table>
    </a-card>
    <a-row v-show="!spinning">
      <a-card style="margin:1em" hoverable>
        <span slot="title"><a-icon type="left" @click="back" style="margin-right:1rem" />{{btndata.hostname}}{{$t('Details')}}</span>
        <a-button slot="extra" @click="lastOne" :disabled="num == 0" type="primary" size="small" style="margin-right: 1rem" icon="up" />
        <a-button slot="extra" @click="nextOne" :disabled="num == nodedata.length-1" type="primary" size="small" icon="down" />
        <Phycontent :btn="btndata" :loading="spinning"></Phycontent>
      </a-card>
    </a-row>
  </a-row>
</template>

<script>
import node from "../../../static/images/svg/ic_node.svg";
import Phycontent from "../../components/physical/Phycontent";
import EmptyData from '@/components/common/EmptyData'

import request from '@/request/request'
export default {
  components: { Phycontent, EmptyData },
  template: '<a-icon :component = "node" />',
  data() {
    return {
      node,
      nodedata:[],
      btndata: '',
      spinning: true,
      num: 0,
      searchText: '',
      nodecolumns: [
        {
          title: this.$t('Node')+this.$t('Name'),
          dataIndex: "hostname",
          key: "hostname",
          sorter: (a, b) => a.hostname.length - b.hostname.length,
          scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.hostname.toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        // {
        //   title: 'IP',
        //   dataIndex: "addr",
        //   key: "addr",
        //   sorter: (a, b) => a.hostname.length - b.hostname.length,
        //   onFilter: (value, record) =>
        //     record.addr.toLowerCase().includes(value.toLowerCase()),
        // },
        // {
        //   title: this.$t('Type'),
        //   dataIndex: "type",
        //   key: "type",
        //   sorter: (a, b) => a.hostname.length - b.hostname.length,
        //   onFilter: (value, record) =>
        //     record.type.toLowerCase().includes(value.toLowerCase()),
        // },
        {
          title: this.$t('Cluster-connection')+this.$t('Status'),
          dataIndex: "cluster_status",
          key: "cluster_status",
          onFilter: (value, record) =>
            record.cluster_status.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'cluster_status'}
        },
        {
          title: 'CPU'+ this.$t('Usage-rate'),
          dataIndex: "cpu_percent",
          key: "cpu_percent",
          // key: "cpu.percent",
          sorter: (a, b) => Number(a.cpu_percent.replace(/%/g, '')) - Number(b.cpu_percent.replace(/%/g, '')),
          onFilter: (value, record) =>
            record.cpu_percent.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'cpu'}
        },
        {
          title: this.$t('Memory')+ this.$t('Usage-rate'),
          dataIndex: "mem_percent",//ram_percent
          key: "mem_percent",
          // key: "mem.percent",
          sorter: (a, b) => Number(a.mem_percent.replace(/%/g, '')) - Number(b.mem_percent.replace(/%/g, '')),
          onFilter: (value, record) =>
            record.mem_percent.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'mem'}
        },
        {
          title: this.$t('Disk')+ this.$t('Usage-rate'),
          dataIndex: "disk_usage",//disk_percent
          key: "disk_usage",
          // key: "disk.percent",
          sorter: (a, b) => Number(a.disk_usage.replace(/%/g, '')) - Number(b.disk_usage.replace(/%/g, '')),
          onFilter: (value, record) =>
            record.disk_usage.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'disk'}
        },
        {
          title: this.$t('Operate'),
          key: 'Operate',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'Operate' },
        }
      ],
      defaultSetting: {emptyText:<EmptyData />},
    };
  },
  mounted() {
      this.getdata()
  },
  computed:{
    getlanguage(){
      return this.$store.state.language
    }
  },
  watch:{
    getlanguage(val){  //监听语言切换，切换data组件内的多语言
      this.nodecolumns= [
        {
          title: this.$t('Node')+this.$t('Name'),
          dataIndex: "hostname",
          key: "hostname",
          sorter: (a, b) => a.hostname.length - b.hostname.length,
          scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.hostname.toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        // {
        //   title: 'IP',
        //   dataIndex: "addr",
        //   key: "addr",
        //   sorter: (a, b) => a.hostname.length - b.hostname.length,
        //   onFilter: (value, record) =>
        //     record.addr.toLowerCase().includes(value.toLowerCase()),
        // },
        // {
        //   title: this.$t('Type'),
        //   dataIndex: "type",
        //   key: "type",
        //   sorter: (a, b) => a.hostname.length - b.hostname.length,
        //   onFilter: (value, record) =>
        //     record.type.toLowerCase().includes(value.toLowerCase()),
        // },
        {
          title: this.$t('Cluster-connection')+this.$t('Status'),
          dataIndex: "cluster_status",
          key: "cluster_status",
          onFilter: (value, record) =>
            record.cluster_status.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'cluster_status'}
        },
        {
          title: 'CPU'+ this.$t('Usage-rate'),
          dataIndex: "cpu_percent",
          key: "cpu_percent",
          sorter: (a, b) => Number(a.cpu_percent.replace(/%/g, '')) - Number(b.cpu_percent.replace(/%/g, '')),
          onFilter: (value, record) =>
            record.cpu_percent.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'cpu'}
        },
        {
          title: this.$t('Memory')+ this.$t('Usage-rate'),
          dataIndex: "mem_percent",
          key: "mem_percent",
          sorter: (a, b) => Number(a.mem_percent.replace(/%/g, '')) - Number(b.mem_percent.replace(/%/g, '')),
          onFilter: (value, record) =>
            record.mem_percent.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'mem'}
        },
        {
          title: this.$t('Disk')+ this.$t('Usage-rate'),
          dataIndex: "disk_usage",
          key: "disk_usage",
          sorter: (a, b) => Number(a.disk_usage.replace(/%/g, '')) - Number(b.disk_usage.replace(/%/g, '')),
          // sorter: (a, b) => a.disk_percent.length - b.disk_percent.length,
          onFilter: (value, record) =>
            record.disk_usage.toLowerCase().includes(value.toLowerCase()),
          scopedSlots:{customRender:'disk'}
        },
        {
          title: this.$t('Operate'),
          key: 'Operate',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'Operate' },
        }
      ]
    }
  },
  methods: {
    getdata() {
      request('get', "machine/").then(res => {
        // console.log('节点列表', res)
        if(res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
        }else {
          this.nodedata = res.data;
        }
      });
    },
    changeExit() {
      this.$router.push({path: '/physical'})
    },
    checkAll(index) {
      this.spinning = false
      this.num = index;
      this.btndata = this.nodedata[this.num];
      this.diskimg(this.btndata.disks_layout);
      this.diskimg(this.btndata.disks);
    },
    lastOne() {
      if(this.num > 0) {
        this.num--;
      }
      this.checkAll(this.num)
    },
    nextOne() {
      if(this.num < this.nodedata.length-1){
        this.num++;
      }
      this.checkAll(this.num)
    },
    back() {
      this.spinning = true
    },
    handleSearch(selectedKeys, confirm) {
        confirm()
        this.searchText = selectedKeys[0]
    },
    handleReset(clearFilters) {
        clearFilters()
        this.searchText = ''
    },
    diskimg(temp) {
      for (let item in temp) {
        let task = ''
        if(typeof(temp[item].values) == 'object'){
          task = temp[item].values
        }else{
          task = temp[item]
        }
        for (const item of task) {
          if (item.type == 1) {
            if (item.status) {
              this.imgflag = "tHDD";
            } else {
              this.imgflag = "fHDD";
            }
          } else if (item.type == 0) {
            if (item.status) {
              this.imgflag = "tSSD";
            } else {
              this.imgflag = "fSSD";
            }
          } else {
            this.imgflag = "NULL";
          }
          item.imgflag = this.imgflag;
        }
      }
    }
  }
};
</script>

